import { useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import {
  Card,
  Checkbox
} from 'antd';
import './welcome.less'
import { nanoid } from 'nanoid'
import Header from '../components/todo_components/Header'
import List from '../components/todo_components/List'
import Footer from '../components/todo_components/Footer'


export default () => {
  const initialTodos = [
    { id: nanoid(), name: '任务一', done: true },
    { id: nanoid(), name: '任务二', done: true },
    { id: nanoid(), name: '任务三', done: true }
  ]
  const [todos, setTodos] = useState(initialTodos)

  // 添加一个todo
  const addTodo = (todoObj) => {
    const newTodos = [todoObj, ...todos]
    setTodos(newTodos)
  }

  // 删除一个todo
  const deleteTodo = id => {
    // 拿到要删除的id了
    const newTodos = todos.filter(item => item.id !== id)
    setTodos(newTodos)
  }

  // 更新单个todo的状态
  const updateTodo = (id, d) => {
    // 拿到要更新的id了
    const newTodos = todos.map(item => {
      if (item.id === id) {
        return { ...item, done:!d}
      }
      else {
        return item
      }
    })
    setTodos(newTodos)
  }

  // 全选
  const checkAll = (x) => {
    const newTodos = todos.map(item => {
      return {...item,done:x}
    })
    setTodos(newTodos)
  }

  // 删除已完成的todo
  const clearDone = () => {
    const newTodos = todos.filter(item => {
      return item.done === false 
    })
    setTodos(newTodos)
  }
  return (
    <PageContainer>
      <Card>
        <Header addTodo={addTodo} />
        <List todos={todos} updateTodo={updateTodo} deleteTodo={deleteTodo} />
        <Footer todos={todos} checkAll={checkAll} clearDone={clearDone}/>
      </Card>
    </PageContainer>
  );
};
